<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/backstage/css/font.css">
    <link rel="stylesheet" href="/backstage/css/xadmin.css">
   
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <div class="x-body">
        <form action="" method="post" class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                        <span class="x-red">*</span>角色名
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="role_name" name="role_name" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">
                         拥有权限 
                    </label>
                    <div style="position:relative; top:-37px;left:80px; " id="checkedAll" ><input type="checkbox"  lay-skin="primary" title="全选" ></div> 
                    <table  class="layui-table layui-input-block">
                        <tbody>
                            
                            {foreach name="authList.topAuth" item="row"}
                            <tr>
                                <td onclick="checkedChild(this)">
                                    <input type="checkbox"  name="auth_ids[]" lay-skin="primary" title="{$row['auth_name']}" value='{$row["id"]}'>
                                </td>
                                <td>
                                    <div class="layui-input-block">
                                        {if(!empty($authList.sonAuth[$row['id']]))}
                                        {foreach name="authList.sonAuth[$row['id']]" item="son"}
                                          <input name="auth_ids[]" lay-skin="primary" type="checkbox" title="{$son['auth_name']}" value="{$son['id']}"> 
                                        {/foreach}
                                        {/if}
                                    </div>
                                </td>
                            </tr>
                            {/foreach}
                        </tbody>
                    </table>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label for="desc" class="layui-form-label">
                        描述
                    </label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" id="comment" name="comment" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                <button class="layui-btn" lay-submit="" lay-filter="add" type="button">增加</button>
              </div>
              {:token()}
            </form>
    </div>
  </body>

  <script type="text/javascript" src="/js/jquery.js"></script>
  <script type="text/javascript" src="/backstage/lib/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="/backstage/js/xadmin.js"></script>
  <script>
      layui.use(['form','layer'], function(){
          $ = layui.jquery;
        var form = layui.form
        ,layer = layui.layer;
      
        //监听提交
        form.on('submit(add)', function(data){

          $.post('save',data.field,function(res){
              if(res.code=='200'){
                    // 获得frame索引
                   var index = parent.layer.getFrameIndex(window.name);
                      //关闭当前frame
                   parent.layer.close(index);
                   parent.layer.msg("增加成功", {icon: 6,time:800});
                   parent.app.getListData();
                   parent.app.page();
              }else{
                  layer.msg(res.msg, {icon: 5,time:1000});
              }
 
          },'json');
   
        });

      });

      //全选子选项
      function checkedChild(obj){

      
        var trObj = $(obj).parent('tr');
        // var flag = $(obj).children('div').hasClass('layui-form-checked');
        var check =  $(obj).find(":checkbox").attr("checked"); 
        // console.log(flag);
        if(check){
            // console.log('remove',this)
            trObj.find(".layui-form-checkbox").removeClass('layui-form-checked');
            trObj.find("input:checkbox").each(function() { //遍历所有的 checkbox
                $(this).attr("checked", false);
            })
            // $(obj).find(":checkbox").attr("checked", false); 
            
        }else{
            // console.log('add')
            trObj.find(".layui-form-checkbox").addClass('layui-form-checked');
            
            trObj.find("input:checkbox").each(function() { //遍历所有的 checkbox
                    $(this).attr("checked", true);
            })
            // $(obj).find("input:checkbox").attr("checked", true);
        }
      }

  </script>

</html>